<template>
  <HeaderComponent />
  <div class="shop-list">
    <header>
      <h1>店铺列表</h1>
    </header>
    <ul class="shop-list-items">
      <li v-for="shop in shops" :key="shop.id" class="shop-item">
        <div class="shop-info">
          <h2 class="shop-name">{{ shop.name }}</h2>
          <p>📍 地点：{{ shop.position }}</p>
        </div>
        <router-link :to="`/canteenInfo/${shop.id}`" class="enter-shop">进入餐厅</router-link>
      </li>
    </ul>

    <!-- 分页组件 -->
    <el-pagination
        style="margin-top: 20px; text-align: center;"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next, jumper"
        @current-change="handlePageChange"
    />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import HeaderComponent from "@/components/HeaderComponent.vue";
import { GetShops } from "@/api"; // 引入 GetShops 方法

export default {
  name: 'CanteenList',
  components: {
    HeaderComponent,
  },
  setup() {

    // 店铺数据
    const shops = ref([]);

    // 分页相关状态
    const currentPage = ref(1); // 当前页码
    const pageSize = ref(5); // 每页显示的店铺数量
    const total = ref(0); // 店铺总数

    // 获取店铺数据
    const fetchShops = async () => {
      try {
        const response = await GetShops(currentPage.value, pageSize.value);
        if (response.data.code === 200) {
          shops.value = response.data.data.canteens; // 假设返回的数据中包含店铺列表
          total.value = response.data.data.total; // 假设返回的数据中包含店铺总数
          console.log("获取店铺数据成功:", response);
        } else {
          console.error("获取店铺数据失败:", response.data.message);
        }
      } catch (error) {
        console.error("获取店铺数据失败:", error);
      }
    };

    // 页面加载时获取店铺数据
    onMounted(() => {
      fetchShops();
    });

    // 分页改变时重新获取数据
    const handlePageChange = (newPage) => {
      currentPage.value = newPage;
      fetchShops();
    };

    return {
      shops,
      currentPage,
      pageSize,
      total,
      handlePageChange,
    };
  },
};
</script>

<style scoped>
.shop-list {
  padding: 20px;
}

header {
  text-align: center;
  margin-bottom: 20px;
}

.shop-list-items {
  list-style: none;
  padding: 0;
}

.shop-item {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.shop-info {
  margin-bottom: 10px;
}

.shop-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.shop-location,
.shop-hours,
.shop-phone {
  color: #666;
}

.enter-shop {
  display: inline-block;
  padding: 5px 10px;
  color: #43678e;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
}

.enter-shop:hover {
  color: #1e3249;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .shop-item {
    padding: 10px;
  }
}
</style>
